{% extends 'base.html' %}

{% block layout %}

{% include 'includes/hero.html' %}

<content x-data="{ mobileSidebarOpen: false }" class="grid grid-cols-3 max-w-7xl mx-auto my-6 px-6">
    <mobileSidebarNav class="md:hidden col-span-full mx-auto mb-6 z-10 relative">
        <a @click="mobileSidebarOpen = !mobileSidebarOpen" class="flex items-center cursor-pointer select-none font-bold hover:bg-gray-200 rounded-lg p-3">
            <span>Categories</span>
            <img x-bind:class="mobileSidebarOpen && 'rotate-180 duration-300'" class="w-4 ml-1.5" src="https://img.icons8.com/small/32/000000/expand-arrow.png" />
        </a>
    </mobileSidebarNav>
    <main class="col-span-full md:col-span-2 md:mr-[5%] lg:mx-[10%] order-2 md:order-1">

        {% block content %}
        {% endblock %}

    </main>
    
    {% load sidebar %}
    {% sidebar_view tag user %}

</content>

{% endblock %}
